<template>
  <div>
    <!-- 列表展示 -->
    <el-table style="width: 100%" :data="list" v-loading="loading"  
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading">
      <el-table-column label="姓名" prop="realname"></el-table-column>
      <el-table-column label="账号" prop="account"></el-table-column>
      <el-table-column label="电话" prop="telephone"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="props">
          <el-button type="warning" @click="open('update',props.row)">修改</el-button>
          <el-button type="danger" @click="del(props.row._id)">删除</el-button>
          <el-button type="success" @click="setRole(props.row)">角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="角色分配" :visible.sync="dialogFormVisible">
      <!-- 1.查询所有的角色信息在这里展示 -->
      <!-- 2.根据当前管理员的角色找到匹配的checkbox进行打钩 -->
      <el-form>
        <!-- v-model绑定的应该是选中的checkbox -->
        <el-checkbox-group v-model="checkedList">
          <!-- 选中的原理：label里的值如果出现在checkedList数组里，它就会选中 -->
          <el-checkbox v-for="v in roleList" :key="v._id" :label="v._id">{{v.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="modifyRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getAllAdmins,roleAssign} from 'api/admin'
import {findRoleList} from 'api/role'
import to from 'await-to-js'
export default {
  data(){
    return {
      list:[],                  //管理员列表
      loading:true,   
      dialogFormVisible:false,  //控制弹出层隐藏或显示
      checkedList:[],           //保存当前管理员的角色id数组
      roleList:[],              //所有的角色信息数组
      adminId:'',               //将要修改角色的管理员id
    }
  },
  mounted(){
    this.find();
  },
  methods:{
    open(){},
    del(){},
    closeDialog(){
      this.dialogFormVisible = false;
    },
    async setRole(admin){
      //存储当前管理员的id
      this.adminId = admin._id;
      console.log("角色：",admin.roleId)
      //弹出角色框的时候，查询所有启用状态的角色
      let [error,res] = await to(findRoleList({enable:1}))
      if(res){
        //所有的角色
        this.roleList = res.roleList;
        //将当前管理员的roleId放到checkedList中，那么自动就会选中对应的checkbox
        this.checkedList = admin.roleId
      }else{
        console.log(error);
      }
      this.dialogFormVisible = true;
    },
    async modifyRole(){
      console.log(this.checkedList)//要设置的角色id数组
      console.log(this.adminId);//管理员id
      let [err,res] = await to(roleAssign(this.adminId,this.checkedList.toString()));
      if(res){
        //成功分配新角色后，要刷新管理员列表
        this.$message.success(res.msg);
        this.find();
      }else{
        this.$message.error(err);
      }
      //关闭对话框
      this.closeDialog();
    },
    async find(){
      let [error,res] = await to(getAllAdmins())
      if(res){
        this.list = res.message;
      }else{
        this.$message.error(error);
      }
      this.loading = false;
    }
  }
}
</script>

<style>

</style>